import { AutoCenter, Button, DotLoading, Input, Space, Toast } from "antd-mobile";
import { isValidArr } from "@/utils";
import ItemComp from "./item";
import React, { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { API, PHONE_REG } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { useSession } from "next-auth/react";

export default function ({ onInfoChange }) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(undefined);
  const [phoneAndAddress, setPhoneAndAdress] = useState({})

  useEffect(() => {
    (async () => {
      // await compHandler.getPhone()
      await compHandler.fetch()
    })()
  }, [])
  useEffect(() => {
    onInfoChange(phoneAndAddress)
  }, [phoneAndAddress])
  const compHandler = {
    // 获取活动状态
    fetch: async () => {
      setLoading(true);

      const resp = await requewt(API.prize.mine);
      // const resp = {
      //   "data": {
      //     "address": null,
      //     "gifts": [
      //       {
      //         "created_date": "11月14日",
      //         "exchange_id": 1,
      //         "id": 1,
      //         "name": "74U币"
      //       },
      //       {
      //         "created_date": "11月14日",
      //         "exchange_id": 2,
      //         "id": 1,
      //         "name": "81U币"
      //       },
      //       {
      //         "created_date": "11月14日",
      //         "exchange_id": 3,
      //         "id": 1,
      //         "name": "68U币"
      //       }
      //     ],
      //     "invite_num": 0,
      //     "phone": null
      //   },
      //   "error_code": 0,
      //   "msg": "ok",
      //   "request": "GET /thing1120api/user/gifts"
      // }
      setLoading(false)
      if (resp?.error_code !== 0) {
        Toast.clear();
        callFeedback({ title: resp?.msg || `请求失败` });
        return;
      }
      const { gifts, phone, address, invite_num } = resp?.data
      setData(gifts || []);
      setPhoneAndAdress({
        phone, address, invite_num
      })
    },
    // handleSubmitPhone: () => {
    //   // if (!PHONE_REG.test(phoneAndAddress.phone)) {
    //   //   return Toast.show('请输入正确的手机号')
    //   // }


    // },
    getPhone: async () => {
      // requewt(API.user.userPhoneAndAddress).then(({ data }) => {
      //   console.log(data)
      //   setPhoneAndAdress(data || {})
      // })


    }
  }
  // useEffect(() => {
  //   if (PHONE_REG.test(phone)) {
  //     compHandler.handleSubmitPhone()
  //   }
  // }, [phone])
  return (
    <div className={`cp-prize`}>
      {/* <div className="header">
        我的奖品
      </div> */}
      <div className="content">

        <div className="prizes" style={{ fontWeight: 'bold' }}>
          <div className={`cp-prize-item`}>
            {/*<div className="date">{item?.created_date}</div>*/}
            {/*<div className="type">{item?.category}</div>*/}
            <div className="value">时间</div>
            {/* <div>{item.num}</div> */}
            <div className="thumb">
              奖品
            </div>
          </div>
          {
            loading ?
              <div className="p-3"><DotLoading /></div>
              :
              isValidArr(data) ?
                data.map((item, index) => {
                  return (
                    <ItemComp item={item} key={index} />
                  )
                })
                :
                <div className="p-3">暂无</div>
          }
          <div className="prize-footer">
            <Space direction="vertical" justify="center">
              <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                <div style={{ flex: '0 0 50px' }}>手机号</div>
                <Input className="phone-input" placeholder="引力域绑定手机号" type="tel" value={phoneAndAddress.phone} onChange={(e) => setPhoneAndAdress(s => ({ ...s, phone: e }))} />

                {/* <Button style={{width:100,marginLeft: 4,flex: '0 0 55px'}} className="submit-phone-btn" onClick={}>提交</Button> */}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
                <div style={{ flex: '0 0 50px' }}>地 址</div>
                <Input className="phone-input" placeholder="宣传品收货地址" type="text" value={phoneAndAddress.address} onChange={(e) => setPhoneAndAdress(s => ({ ...s, address: e }))} />

                {/* <Button style={{width:100,marginLeft: 4,flex: '0 0 55px'}} className="submit-phone-btn" onClick={}>提交</Button> */}
              </div>
              <AutoCenter>已成功邀请{phoneAndAddress.invite_num}人</AutoCenter>
              {/* <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }}>
                <Button style={{ width: 100, marginLeft: 4, flex: '0 0 155px' }} className="act-btn act-btn-bevel submit-btn" onClick={compHandler.handleSubmitPhone}>提交</Button>
              </div> */}
            </Space>



            {/* <div style={{fontSize:'1.2rem',textAlign: 'center'}}>*奖励将于活动结束后7个工作日发放</div> */}
          </div>

        </div>

      </div>
      <div >


      </div>
    </div>
  )
}